<template>
  <div class="app-container">
    <div class="button">
      <el-row style="padding-bottom: 1rem">
        <el-col :span="12">
          <span>商品类型:</span>
          <el-select v-model="categoryId"
                     @change="find()" clearable
                     size="small" filterable placeholder="请选择商品类型" style="width:30%">
            <el-option
              v-for="item in options"
              :key="item.categoryId"
              :label="item.categoryName"
              :value="item.categoryId"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12" align="right">
          <div class="grid-content bg-purple-dark">
            <el-button type="primary" size="mini" @click="$router.push('add')">添加商品</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-table
      id="myform"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="商品名">
        <template slot-scope="scope">
          {{ scope.row.productName }}
        </template>
      </el-table-column>
      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
          <el-image :src="byteToArray(scope.row.productPicture)"/>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" width="80rem" align="center" prop="categoryName"/>
      <el-table-column label="商品标题">
        <template slot-scope="scope">
          {{ scope.row.productTitle }}
        </template>
      </el-table-column>
      <el-table-column label="商品介绍">
        <template slot-scope="scope">
          {{ scope.row.productIntro }}
        </template>
      </el-table-column>
      <el-table-column label="原价" width="80rem" align="center" prop="productSellingPrice"/>
      <el-table-column label="现价" width="80rem" align="center" prop="productPrice"/>
      <el-table-column label="总数" width="80rem" align="center" prop="productNum"/>
      <el-table-column label="已售" width="80rem" align="center" prop="productSales"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row.productId)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleClean(scope.row.productId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import $ from "@/api/project";

  export default {
    data() {
      return {
        value: "",
        state: 0,
        list: [],
        val: "",
        roleId: "",
        userNumber: "",
        listLoading: true,
        options: [],
        categoryId: undefined,
      };
    },
    created() {
      this.getCategoryList()
      this.find();
    },
    methods: {
      async getCategoryList() {
        await $.findAllCategory().then(res => {
          this.options = res.data
        })
      },
      byteToArray(path) {
        return  "http://localhost:8090/product/imgInfo?path="+path
      },
      handleEdit(id){
        this.$router.push({
          path:"edit",
          query:{id:id}
        })
      },
      find() {
        this.listLoading = true;
        $.findProductByCategoryId({categoryId: this.categoryId}).then(res => {
            console.log(res.data)
            this.list = res.data
            this.listLoading = false
          }
        );
      },
      handleClean(id) {
        this.$confirm("此操作将删除该商品, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //console.log(id)
            $.deleteProductById({productId: id}).then(response => {
              this.$message({
                type: "success",
                message: "已删除!"
              });
              this.find();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
    }
  };
</script>
<style scoped>
  .button {
    padding-left: 1rem;
  }
</style>
